<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>工作组管理</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
</head>
<body style="padding:10px;">
<div id="north-div"></div>
<div id="center"></div>
<script type="text/javascript">
Ext.onReady(function(){
	//编码方式
	Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
	//使用表单提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	
    var ds = new Ext.data.Store({//这是数据源
        proxy : new Ext.data.HttpProxy({url:'staff/persList.action'}),
        reader: new Ext.data.JsonReader({
            root:'topics',
            totalProperty: 'totalCount',
            id: 'id'
            },[{name:'id'},{name:'name'}])
    });

    var colModel = new Ext.grid.ColumnModel([//定义列
         	{header:'ID',width:50,sortable:true,dataIndex:'id'},
         	{header:'工作组名称', width:400,sortable:true,dataIndex:'name'}
        ]);
    var tb = new Ext.Toolbar('north-div');//创建一个工具条
   
    tb.add({
        id:'addPersBtn',
        text: '添加',
        handler: newUser
        },{
        text: '编辑',
        handler: editUser
        },{
        text: '删除',
        handler: delUser
    });
 
    var grid = new Ext.grid.GridPanel({//列表
                id:'data_grid',
                border:false,
                region:'center',
                loadMask: true,
                el:'center',
                title:'条目列表',
                store: ds,
                cm: colModel,
                autoScroll: true,
                bbar: new Ext.PagingToolbar({
                    pageSize: 20,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '第{0} 到 {1} 条数据 共{2}条',
                    emptyMsg: "没有数据"
                })
            });
    
    var top = new Ext.FormPanel({//这里是搜索表单
        buttonAlign:'right',
        labelWidth:70,
        region:'north',
        height:100,
        frame:true,
        title: '搜索',
        items: [{
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '工作组名称',
                        name: 'profe.name',
                        id: 'pers_name',
                        anchor:'90%'
                    }]
        }],
        buttons: [{
            text: '搜索',
            handler:function(){loadList();}
        }]
    });
    
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
              border:false,
              region:'north',
              contentEl:'north-div',
              tbar:tb,
              height:26
            },{
                layout:"border",
                region:'center',
                border:false,
                items:[top,grid]
                }
        ]}
    );
    
    var loadList = function(){
	    ds.load({params:{start:0, limit:20},callback:function(r,options,success){
		    if(!success){//没取到数据时返回的success=false
		        grid.store.removeAll();//清除原有数据
		  }
	    }});
    }
    
    loadList();
    
    // 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了
    ds.on('beforeload',function(){
        Ext.apply(
        this.baseParams,
        {
            'pers.name':Ext.get('pers_name').dom.value
        });
    });

    var simple = new Ext.FormPanel({
        labelWidth: 75,
        frame:true,
        bodyStyle:'padding:10px 5px 0px 30px',
        width: 350,
        defaults: {width: 230}, 
        defaultType: 'textfield',
        items: [{
                fieldLabel: '工作组名称',
                id:'edit_pers_name',
                name: 'profe.name',
                allowBlank:false,
                listeners : {
					'change':function(node,event){
			              addDialog.buttons[0].setDisabled(false);
			        }
                }
            },{
                xtype:'hidden',
                id:'pers_id',
                name:'profe.id'
            }]
    });
    
    
    var doClose = function(){
        addDialog.hide();
    }

    var doAdd = function(){
    	//提交到服务器操作
        simple.form.doAction('submit',{
          url:'staff/addPers.action',//文件路径
          method:'post',//提交方法post或get
          //提交成功的回调函数
          success:function(response,options){
        	  addDialog.hide();
        	  if(Ext.get('pers_id').dom.value != null&&Ext.get('pers_id').dom.value != ''){
	        	  Ext.get('pers_id').dom.value = '';
	        	  Ext.Msg.alert('编辑成功','  恭喜您成功地修改了工作组信息！',function(){ds.reload();});
              }else{
	        	  Ext.Msg.alert('添加成功','  恭喜您成功地添加了新的工作组！',function(){ds.reload();});
              }
          },
          //提交失败的回调函数
          failure:function(response,options){
        	  Ext.Msg.alert('错误','请检查您的输入是否为空,如果多次确认无法成功请与系统管理员联系!！');
          }
        });
    }
    
    var addDialog;

    var initEditDialog = function(title){
        if(!addDialog){
        	addDialog = new Ext.Window({
     			layout:'fit',
     			width:400,
     			height:150,
     			closeAction:'hide',
     			plain:true,
     			buttons:[{text:'保存',disabled:true,handler:doAdd},{text:'关闭',handler:doClose}],
     			items:simple
         });
        }
        addDialog.setTitle(title);
    }
    
    function newUser() {
    	initEditDialog('新增工作组');
    	try{Ext.get('pers_id').dom.value = '';}catch(e){}
        addDialog.show('addpersBtn');
    }
    
    function editUser() {
        var s = grid.getSelectionModel().getSelections();
        if (s.length>1) {
            Ext.Msg.alert('出错啦','您选择了 '+s.length+' 条记录,目前只支持一次编辑一条记录！');
            return false;
        }
        if (s.length==0) {
            Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
            return false;
        }
  	    initEditDialog('编辑工作组');
  	    addDialog.show('addpersBtn');
  	    Ext.get('pers_id').dom.value = s[0].data.id;
  	    Ext.get('edit_pers_name').dom.value = s[0].data.name;
    }

    var getIds = function(g){
    	var s = g.getSelectionModel().getSelections();
    	 if (s.length==0) {
             return false;
         }
         var ids = [];
         for(var i=0;i<s.length;i++){
             ids.push(s[i].data.id);
         }
         return ids.join(',');
    }

    var delSucc = function(result){
    	 loadList();
    }
    
    function delUser() {
        var ids = getIds(grid);
        if (ids) {
            Ext.Msg.confirm('确认', '真的要删除吗？', function(btn){
                if (btn == 'yes'){
                    Ext.Ajax.request({
                       url: 'staff/delPers.action?persIds='+ids,
                       success:delSucc
                    });
                }
            });       
        } else {
            Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
        }
    }

});
</script>
</body>
</html>